.mask{ display: none; }

.modern{
  .mask{display: block;}

  .loading-gif {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    margin-left: -24px;
    background: url(img/loading.gif) 50% 50% no-repeat;
    z-index: 3;
    -webkit-animation: loadinghide .5s 1s forwards cubic-bezier(0.6, 0.08, 0.36, 0.96);
    animation: loadinghide .5s 1s forwards cubic-bezier(0.6, 0.08, 0.36, 0.96);
  }

  .topMask{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: #000;
    z-index: 1;
    -webkit-animation: moveUp .8s 1.5s forwards cubic-bezier(0.6, 0.08, 0.36, 0.96);
    animation: moveUp .8s 1.5s forwards cubic-bezier(0.6, 0.08, 0.36, 0.96);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -ms-transform:none;
  }

  .bottomMask{
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 50%;
    background: #000;
    z-index: 1;
    -webkit-animation: moveDown .8s 1.5s forwards cubic-bezier(0.6, 0.08, 0.36, 0.96);
    animation: moveDown .8s 1.5s forwards cubic-bezier(0.6, 0.08, 0.36, 0.96);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -ms-transform:none;
  }
}

@-webkit-keyframes moveUp{
  0%{-webkit-transform: translateY(0);}
  99%{opacity: 1;}
  100%{-webkit-transform: translateY(-100%);opacity: 0;}
}
@keyframes moveUp{
  0%{transform: translateY(0);}
  99%{opacity: 1;}
  100%{transform: translateY(-100%);opacity: 0;}
}

@-webkit-keyframes moveDown{
  0%{ -webkit-transform: translateY(0);}
  99%{ -webkit-transform: translateY(100%); opacity: 1;}
  100%{ -webkit-transform: translateY(-200%);opacity: 0;}
}
@keyframes moveDown{
  0%{ transform: translateY(0);opacity: 1;}
  99%{ transform: translateY(100%); opacity: 1;}
  100%{ transform: translateY(-200%);opacity: 0;}
}

@-webkit-keyframes loadinghide{
  0%{ opacity: 1;}
  100%{ opacity: 0;}
}
@keyframes loadinghide{
  0%{ opacity: 1;}
  100%{ opacity: 0;}
}